<template>
  <div class="app-container">
    <el-card shadow="never" class="table-container">
      <el-table v-loading="loading" :data="TableData" highlight-current-row row-key="id">
        <el-table-column label="城市" min-width="80" align="center" prop="cityName"></el-table-column>
        <el-table-column label="订单类型" min-width="80" align="center" prop="orderType"></el-table-column>
        <el-table-column label="订单状态" min-width="80" align="center" prop="orderStatus"></el-table-column>
        <el-table-column label="平台" min-width="80" align="left" prop="platformId">
          <template #default="scope">
            <div>{{ platFormEnum[scope.row.platformId] }}</div>
          </template>
        </el-table-column>
        <el-table-column label="渠道" min-width="80" align="center" prop="channelId">
          <template #default="scope">
            <div>{{ channelEnum[scope.row.channelId] }}</div>
          </template>
        </el-table-column>
        <el-table-column label="车型" min-width="80" align="center" prop="vehicleTypeName"></el-table-column>
        <el-table-column label="供应商" min-width="280" align="center">
          <template #default="scope">
            <div>{{ scope.row.supplierNo }}-{{ scope.row.supplierName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="司机名称" min-width="80" align="center" prop="driverName"></el-table-column>
        <el-table-column label="司机手机" min-width="130" align="center" prop="driverPhone"></el-table-column>
        <el-table-column label="总金额" min-width="80" align="center" prop="totalFund"></el-table-column>
        <el-table-column label="贵宾金额" min-width="80" align="center" prop="gbFund"></el-table-column>
        <el-table-column label="平台金额" min-width="80" align="center" prop="platformFund"></el-table-column>
        <el-table-column label="渠道金额" min-width="80" align="center" prop="channelFund"></el-table-column>
        <el-table-column label="司机金额" min-width="80" align="center" prop="driverFund"></el-table-column>
        <el-table-column label="司机已提现金额" min-width="80" align="center" prop="driverWithdrawFund"></el-table-column>
        <el-table-column label="司机未提现金额" min-width="80" align="center" prop="driverRemainFund"></el-table-column>
        <el-table-column label="供应商金额" min-width="80" align="center" prop="supplierFund"></el-table-column>
        <el-table-column label="供应商结算金额" min-width="80" align="center" prop="supplierBillFund"></el-table-column>
        <el-table-column label="罚款金额" min-width="80" align="center" prop="fineFund"></el-table-column>
        <el-table-column label="罚款备注" min-width="80" align="center" prop="fineRemark"></el-table-column>
        <el-table-column label="扣款金额" min-width="80" align="center" prop="cutFund"></el-table-column>
        <el-table-column label="扣款备注" min-width="80" align="center" prop="cutRemark"></el-table-column>
        <el-table-column label="补偿金额" min-width="80" align="center" prop="compensationFund"></el-table-column>
        <el-table-column label="补偿备注" min-width="80" align="center" prop="compensationRemark"></el-table-column>
        <el-table-column label="创建时间" min-width="180" align="center" prop="createTime"></el-table-column>
        <el-table-column label="订单时间" min-width="180" align="center" prop="orderTime"></el-table-column>
      </el-table>
      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>
    <!-- 改派 -->
  </div>
</template>

<script setup lang="ts">
import MoneyApi from "@/api/money";
import { orderStatusEnum, platFormEnum, channelEnum, orderTypeEnum, bizTypeEnum, luggageEnum, channelArr, bizTypeArr, orderTypeArr, platFormArr, carTypeArr } from "@/enums/common";
const route = useRoute();
const queryData: any = route.query.id;
const queryFormRef = ref(ElForm);
const total = ref(0);
const loading = ref(false);

// 查询参数
const queryParams = reactive<MenuQuery>({
  pageNo: 1,
  pageSize: 10,
});
// 菜单表格数据
const TableData = ref([]);

// 查询菜单
function handleQuery() {
  loading.value = true;
  queryParams.id = queryData;
  MoneyApi.getInfo(queryParams)
    .then((data) => {
      TableData.value = data.result;
      total.value = data.total * 1;
    })
    .finally(() => {
      loading.value = false;
    });
}

// 重置查询
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNo = 1;
  handleQuery();
}

onMounted(() => {
  handleQuery();
});
</script>
<style lang="scss" scoped>
.red_rate {
  color: red;
}
.address_box {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  .item {
    display: flex;
    align-items: center;
    margin: 4px 0;
    .tag {
      width: 50px;
      height: 23px;
      text-align: center;
      color: orange;
      background: #fff8e6;
    }
    .tag2 {
      color: #3fd175;
      background: #e7faf0;
    }
  }
}
</style>
